<template>
    <div class="loginContainer">
        <div class="formContainer">
            <el-form
                :model="ruleForm"
                status-icon
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
            >
                <el-form-item v-show="flags?true:false" label="用户名" prop="username">
                    <el-input v-model="ruleForm.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item v-show="flags?true:false" label="密码" prop="password">
                    <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item v-show="flags?false:true" label="手机号" prop="mobile">
                    <el-input style="width:300px;" v-model="ruleForm.mobile" autocomplete="off"></el-input>
                    <el-button size="small" type="primary">获取验证码</el-button>
                </el-form-item>
                <el-form-item v-show="flags?false:true" label="验证码" prop="verifycode">
                    <el-input v-model="ruleForm.verifycode" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <div class="remeberMe">
                        <el-checkbox v-model="checked">记住我</el-checkbox>
                        <div>
                            <el-link :type="flags?'primary':''" @click="usepassword">用户密码登录</el-link>/
                            <el-link :type="flags?'':'primary'" @click="usemobile">短信验证码登录</el-link>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" @click="submitForm('ruleForm')">登录</el-button>
                    <el-button size="small" @click="resetForm('ruleForm')">重置</el-button>
                    <el-button size="small" @click="gohome" type="success">首页</el-button>
                </el-form-item>
            </el-form>
            <el-divider></el-divider>
            <p>第三方登录</p>
            <div class="otherlogin">
                <div>
                    <i class="fa fa-weixin fa-1x" aria-hidden="true"></i>
                </div>
                <div>
                    <i class="fa fa-qq" aria-hidden="true"></i>
                </div>
                <div>
                    <i class="fa fa-skype" aria-hidden="true"></i>
                </div>
            </div>
        </div>
    </div>
</template>



<script>
export default {
    data() {
        let checkUsername = (rule, value, callback) => {
            if (this.flags) {
                if (value === "") {
                    callback(new Error("请输入用户名!"));
                } else {
                    if (value.length > 16) {
                        callback(new Error("用户名过长!"));
                    } else {
                        callback();
                    }
                }
            } else {
                callback();
            }
        };
        let checkPassword = (rule, value, callback) => {
            if (this.flags) {
                if (value === "") {
                    callback(new Error("请输入用户口令!"));
                } else {
                    callback();
                }
            } else {
                callback();
            }
        };
        let checkMobile = (rule, value, callback) => {
            if (!this.flags) {
                let phoneReg = /^1[3-578]\d{9}$/;
                if (phoneReg.test(value)) {
                    callback();
                } else {
                    callback(new Error("请输入合法境内手机号码!"));
                }
            } else {
                callback();
            }
        };
        let checkverifycode = (rule, value, callback) => {
            if (!this.flags) {
                if (value === "") {
                    callback(new Error("请输入正确验证码!"));
                } else {
                    callback();
                }
            } else {
                callback();
            }
        };
        return {
            ruleForm: {
                username: "",
                password: "",
                mobile: "",
                verifycode: ""
            },
            rules: {
                username: [{ validator: checkUsername, trigger: "blur" }],
                password: [{ validator: checkPassword, trigger: "blur" }],
                mobile: [{ validator: checkMobile, trigger: "blur" }],
                verifycode: [{ validator: checkverifycode, trigger: "blur" }]
            },
            flags: true,
            checked: false
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    let postInfos = {
                        username: this.ruleForm.username,
                        password: this.ruleForm.password
                    };
                    if (this.flags) {
                        // 账户密码登录
                        this.$ajax
                            .post("login/", postInfos)
                            .then(res => {
                                //console.log(res.data);
                                //console.log(res.status);
                                if (res.status == 200) {
                                    window.localStorage.setItem(
                                        "token",
                                        res.data.token
                                    );
                                    this.getUserInfos();
                                    this.getUserFavList();
                                    this.getUserShopcar();
                                    this.getUserOrder();
                                    this.$router.push("home");
                                }
                            })
                            .catch(err => {
                                console.log(err);
                                if (err.detail == 400) {
                                    this.$notify({
                                        message: "用户名获取密码不正确！",
                                        type: "warning"
                                    });
                                }
                            });
                    } else {
                        // 短信验证码登录
                        this.$message({
                            message: "短信验证码登录",
                            type: "success"
                        });
                    }
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        gohome() {
            this.$router.push("home");
        },
        // 进入页面就尝试获取用户信息存储在store里面---在登录页面也要进行此操作
        getUserInfos() {
            let mytoken = window.localStorage.getItem("token", "");
            if (mytoken === "") {
            } else {
                this.$ajax.get("user/").then(res => {
                    //.log(res.data);
                    this.$store.commit("updateUserInfos", res.data);
                });
            }
        },
        getUserFavList() {
            this.$ajax.get("fav/").then(res => {
                this.$store.commit("updateUserFavList", res.data.results);
            });
        },
        getUserShopcar() {
            this.$ajax.get("shopcar/").then(res => {
                this.$store.commit("updateShopcar", res.data.results);
            });
        },
        getUserOrder() {
            this.$ajax.get("order/").then(res => {
                this.$store.commit("updateUserOrderList", res.data.results);
            });
        },
        // 使用手机号登录
        usemobile() {
            this.flags = false;
        },
        //使用账号密码登录
        usepassword() {
            this.flags = true;
        }
    }
};
</script>
        


<style lang="scss" scoped>
.el-form-item__label {
    text-align: left;
}
.el-divider {
    margin-bottom: 5px;
}
.loginContainer {
    .formContainer {
        text-align: center;
        width: 500px;
        margin: 10px auto;
    }
    .otherlogin {
        display: flex;
        justify-content: center;
        div {
            width: 30px;
            height: 30px;
            margin: 0 8px;
            // border: 1px solid red;
            i {
                opacity: 0.5;
                transition: all linear 0.3s;
            }
            i:hover {
                opacity: 1;
                color: aqua;
            }
        }
    }
    p {
        font-size: 11px;
        color: #ccc;
        font-style: italic;
        margin: 0;
    }
    .remeberMe {
        display: flex;
        justify-content: space-around;
    }
}
</style>